<template>
	<view class="">
		<titleBar title="商城" :isSubPage="false"></titleBar>
		<view class="container">

			<!-- 顶部搜索栏 -->
			<view class="search-bar">
				<!-- <view class="search-input">
					<uni-icons type="search" size="18" color="#999"></uni-icons>
					<input type="text" placeholder="搜索商品" />
				</view> -->
				<view class="search-container">
					<image src="/static/index/search-icon.png" mode="aspectFill"></image>
					<input type="text" placeholder="搜索商品" class="search-input" />
				</view>
			</view>

			<!-- 品牌专区 -->
			<view class="section brand-section">
				<view class="section-header">
					<text class="section-title">品牌专区</text>
					<!-- <text class="section-more">查看更多 ></text> -->
				</view>
				<scroll-view class="brand-scroll" scroll-x="true">
					<view class="brand-list">
						<view class="brand-item" v-for="(brand, index) in brands" :key="index">
							<image :src="brand.avatar" @click="goStore(brand)" mode="aspectFill" class="brand-logo">
							</image>
							<text class="brand-name">{{ brand.shopName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 促销活动 -->
			<view class="section promotion-section">
				<view class="section-header">
					<text class="section-title">促销活动</text>
					<!-- <text class="section-more">全部活动 ></text> -->
				</view>
				<swiper class="promotion-swiper" autoplay interval="3000" duration="500">
					<swiper-item v-for="(promotion, index) in promotions" :key="index">
						<view class="promotion-card">
							<image :src="promotion.image" mode="aspectFill" class="promotion-image"></image>
							<view class="promotion-info">
								<text class="promotion-title">{{ promotion.title }}</text>
								<text class="promotion-desc">{{ promotion.description }}</text>
								<view class="promotion-tag">{{ promotion.tag }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 新品推荐 - 瀑布流 -->
			<view class="section new-products-section">
				<view class="section-header">
					<text class="section-title">新品推荐</text>
					<!-- <text class="section-more">更多商品 ></text> -->
				</view>

				<!-- 瀑布流布局 -->
				<view class="waterfall-container">
					<!-- 左列 -->
					<view class="waterfall-column">
						<view class="product-item" v-for="(product, index) in leftProducts" :key="product.id"
							@click="navigateToDetail(product.id)">
							<image :src="product.picture" mode="widthFix" class="product-image"></image>
							<view class="product-info">
								<text class="product-name">{{ product.tradeName }}</text>
								<view class="product-price-row">
									<text class="product-price">¥{{ product.prices }}</text>
									<text class="product-original-price"
										v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
								</view>
								<view class="product-tags">
									<view class="product-tag" v-for="(tag, tagIndex) in product.label" :key="tagIndex">
										{{ tag }}
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 右列 -->
					<view class="waterfall-column">
						<view class="product-item" v-for="(product, index) in rightProducts" :key="product.id"
							@click="navigateToDetail(product.id)">
							<image :src="product.picture" mode="widthFix" class="product-image"></image>
							<view class="product-info">
								<text class="product-name">{{ product.tradeName }}</text>
								<view class="product-price-row">
									<text class="product-price">¥{{ product.prices }}</text>
									<text class="product-original-price"
										v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
								</view>
								<view class="product-tags">
									<view class="product-tag" v-for="(tag, tagIndex) in product.label" :key="tagIndex">
										{{ tag }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		productApi
	} from '@/api/user.js'
	export default {
		components: {
			titleBar
		},
		data() {
			return {
				// {
				// 		id: 1,
				// 		name: '爪印营养师',
				// 		logo: '/static/pet-test.png'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '萌力觉醒',
				// 		logo: '/static/pet-test.png'
				// 	},
				// 	{
				// 		id: 3,
				// 		name: '原膳森林',
				// 		logo: '/static/pet-test.png'
				// 	},
				// 	{
				// 		id: 4,
				// 		name: '毛球研究所',
				// 		logo: '/static/pet-test.png'
				// 	},
				// 	{
				// 		id: 5,
				// 		name: '食光守护者',
				// 		logo: '/static/pet-test.png'
				// 	}
				brands: [],
				promotions: [{
						id: 1,
						title: '春季大促',
						description: '全场商品低至5折，限时抢购',
						tag: '限时折扣',
						image: '/static/shop/spring.jpg'
					},
					{
						id: 2,
						description: '新用户注册即送100元优惠券',
						tag: '新人福利',
						image: '/static/shop/xinren.jpg'
					},
					{
						id: 3,
						title: '满减活动',
						description: '满300减50，满500减100',
						tag: '满减优惠',
						image: '/static/shop/manjian.jpg'
					}
				],
				newProducts: []
			}
		},
		mounted() {
			this.getGoods()
			this.getStores()
		},
		computed: {
			// 将商品分为左右两列，实现瀑布流布局
			leftProducts() {
				return this.newProducts.filter((_, index) => index % 2 === 0);
			},
			rightProducts() {
				return this.newProducts.filter((_, index) => index % 2 === 1);
			}
		},
		methods: {
			async getGoods() {
				try {
					const result = await productApi.getProductList()
					const products = result
					this.newProducts = products.slice(0, 5)
					this.newProducts.forEach(product => {
						product.label = product.label ? product.label.split(',') : [];
					});
				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
				}
			},
			async getStores() {
				try {
					const result = await productApi.getStoreList()
					this.brands = result
				} catch (error) {
					uni.showToast({
						title: '获取店铺失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取店铺失败', error);
				}
			},
			goStore(brand) {
				getApp().globalData.currentStored = brand.id;
				uni.navigateTo({
					url: '/pages/shop/store'
				})
			},
			navigateToDetail(id) {
				getApp().globalData.currentGoodId = id;
				uni.navigateTo({
					url: `/pages/shop/goods?id=${id}`
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 0 20rpx;
		background-color: #f5f5f5;
	}

	/* 搜索栏 */
	.search-bar {
		padding: 10rpx 0;
		margin-bottom: 20rpx;
	}

	.search-container {
		flex: 1;
		background-color: white;
		display: flex;
		align-items: center;
		border-radius: 40rpx;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	.search-container image {
		width: 50rpx;
		height: 50rpx;
	}

	.search-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	/* 公共样式 */
	.section {
		margin-bottom: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.section-more {
		font-size: 24rpx;
		color: #999;
	}

	/* 品牌专区样式 */
	.brand-scroll {
		width: 100%;
	}

	.brand-list {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.brand-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
	}

	.brand-logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.brand-name {
		font-size: 24rpx;
		color: #333;
	}

	/* 促销活动样式 */
	.promotion-swiper {
		height: 200rpx;
	}

	.promotion-card {
		display: flex;
		height: 100%;
		background: white;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.promotion-image {
		width: 200rpx;
		height: 100%;
	}

	.promotion-info {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		position: relative;
	}

	.promotion-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.promotion-desc {
		font-size: 24rpx;
		color: #666;
	}

	.promotion-tag {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		background: #FF6B6B;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
	}

	/* 瀑布流布局样式 */
	.waterfall-container {
		display: flex;
		justify-content: space-between;
	}

	.waterfall-column {
		width: 48%;
	}

	.product-item {
		background: white;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}

	.product-image {
		width: 100%;
		/* mode="widthFix" 会根据宽度自动调整图片高度，实现不同高度的瀑布流效果 */
	}

	.product-info {
		padding: 16rpx;
	}

	.product-name {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-price-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.product-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF6B6B;
	}

	.product-original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.product-tag {
		font-size: 20rpx;
		color: #FF6B6B;
		background-color: rgba(255, 107, 107, 0.1);
		padding: 2rpx 8rpx;
		margin-right: 8rpx;
		border-radius: 4rpx;
	}
</style>